<script setup lang="ts">
import { watch, ref, reactive } from 'vue';
import { useUserStore } from '@/stores/user'
import TokenManager from '@/framework/manager/token-manager'


const userStore = useUserStore();
const show = ref(false); //是否显示登录弹窗
const loginForm = reactive({
  username: '', // 登录账号
  password: '' // 登录密码
})

const tokenData = TokenManager.get();
if (tokenData) {
  userStore.loginSuccess(tokenData);
}

// 登录提交
function onSubmit(): void {
  //globalVal.showLoading();

}


// 监听器
watch(() => userStore.isLoggedIn, () => {
  //show.value = !newVal;
}, { deep: true, immediate: true })

</script>
<template>
  <el-dialog v-model="show" title="用户登录" :show-confirm-button="false" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="loginForm" label-width="0" @submit="onSubmit">
      <el-form-item prop="username" :rules="[{ required: true, message: '请填写用户名' }]">
        <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="UserFilled" />
      </el-form-item>
      <el-form-item prop="password" :rules="[{ required: true, message: '请填写密码' }]">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="密码"
          prefix-icon="Lock"
        />
      </el-form-item>
      <el-form-item >
        <el-button style="width: 100%;" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
</style>
